<template>
    <div>
        <div class="echartBox">
            <!-- <Echart :height="'350px'" :width="'100%'" :option="option" /> -->
            <div id="chart" style="width: 100%;height: 350px;"></div>
        </div>
        <div class="tableBox">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" highlight-current-row :isShowPage="false" :current="false" max-height="660px" />
        </div>
    </div>
</template>


<script>
// import Echart from '@/components/echart'
import * as echarts from "echarts";
export default {
    name: 'Xszst',
    // components: { Echart },
    props: {
        rowData: {
            type: Object, default: function () {
                return {}
            }
        },
        charData: {
            type: Object, default: function () {
                return []
            }
        }

    },
    data() {
        return {
            loading: false,
            option: {
                title: {},
                grid: {
                    right: '5%',
                    top: '13%',
                    bottom: '12%'
                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                        rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                    },
                    data: this.rowData.charData.xAxisData
                }],
                yAxis: [{
                    type: 'value',
                    name: '金额',
                }],
                series: [{
                    name: '金额',
                    type: 'bar',
                    barMaxWidth: 30,
                    data: this.rowData.charData.seriesData
                }],
                color: ['#a90000']
            },
            tableColumns: [
                {
                    label: '月份',
                    prop: 'kprq',
                    align: 'center',

                },
                {
                    label: '销售金额(元)',
                    prop: 'jshj',
                    align: 'center',

                },
            ],
            tableDatas: [],
            chart: ''

        }
    },

    mounted() {
        // this.option.xAxis.data = this.rowData.
        // console.log(this.rowData)
        // this.initChart()
    },
    watch: {
        rowData: {
            handler(newVal, oldVal) {
                this.initChart(newVal)
                this.tableDatas = newVal.tableData
                console.log('user对象发生了变化', newVal, oldVal);
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        initChart(newVal) {
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            newPromise.then(() => {
                //	此dom为echarts图标展示dom
                this.chart = echarts.init(document.getElementById('chart'));
                const option = {
                    title: {},
                    grid: {
                        right: '5%',
                        top: '13%',
                        bottom: '12%'
                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: {
                            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                            rotate: 30, //调整数值改变倾斜的幅度（范围-90到90）
                        },
                        data: newVal.charData.xAxisData || []
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '金额',
                    }],
                    series: [{
                        name: '金额',
                        type: 'bar',
                        barMaxWidth: 30,
                        data: newVal.charData.seriesData || []
                    }],
                    color: ['#a90000']
                };
                this.chart.setOption(option);
            })


        },
        updateChart(newData) {
            const option = this.chart.getOption();

            option.xAxis.data = newData.charData.xAxisData;
            option.series[0].data = newData.charData.seriesData;
            this.chart.setOption(option);
        }
    }
}
</script>


<style lang="scss" scoped>
.echartBox {
    margin-bottom: 15px;
    border: 1px solid rgb(221, 221, 221);
}
</style>